<template>
  <div id="modelFileList">
    <div v-if="noFile()">
      <el-empty description="No Files"></el-empty>
    </div>
    <div v-else>
      <div id="fileTree">
        <el-tree v-for="model in modelFileList" v-bind:key="model.name"
                 :ref="model.name"
                 :data="model.files"
                 show-checkbox
                 :node-key="model.name"
                 :default-expanded-keys="[]"
                 :default-checked-keys="[]"
                 :props="defaultProps"
        >
        </el-tree>
      </div>
      <el-row type="flex" justify="end">
        <el-col :span="4">
          <el-button type="primary" v-on:click="filesSubmit">Upload</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>

export default {
  name: "ModelFileList",
  components: {},
  data() {
    return {
      modelFileList: this.$store.state.model.modelFileList,
      defaultProps: {
        children: 'children',
        label: 'name',
      }
    };
  },
  methods: {
    noFile: function () {
      return this.modelFileList.length === 0
    },
    filesSubmit: function () {
      let file_list = []
      for (let m of this.modelFileList) {
        file_list.push({
          'model_name': m.name,
          'file_list': this.$refs[m.name][0].getCheckedNodes(true, false)
        })
      }
      this.$store.commit('setUploadFileList', file_list)
      this.$store.dispatch('remoteStartUploading')
    }
  }
}
</script>

<style scoped>
#fileTree {
  min-height: 350px;
}

#modelFileList {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background: white;
}
</style>